<template>
	<!-- <ComModal v-model:modalVisible="modalVisible" title="新建用户" submitText="提交" @handleSubmit="handleSubmit" scroll-to-first-error width="40vw"> -->
		<a-form :model="formParams" ref="formRef" label-width="120px" :rules="rules" style="width: 90%;">
			<!-- <a-form-item label="用户名" field="username">
				<a-input v-model.trim="formParams.username" placeholder="请输入名称" />
			</a-form-item> -->
			<a-form-item label="姓氏:" field="firstName">
				<a-input v-model.trim="formParams.firstName" placeholder="请输入姓氏" />
			</a-form-item>
			<a-form-item label="名字:" field="lastName">
				<a-input v-model.trim="formParams.lastName" placeholder="请输入名字" />
			</a-form-item>
			<a-form-item label="邮箱:" field="email">
				<a-input v-model.trim="formParams.email" placeholder="请输入邮箱" />
			</a-form-item>
			<a-form-item label="手机号:" field="mobile">
				<a-input v-model.trim="formParams.mobile" placeholder="请输入手机号" maxlength="11"/>
			</a-form-item>
			<a-form-item label="头像:" field="avatar">
				<ComUpload @imgUrl="formParams.avatar=$event">
					<a-avatar >
						<img
							alt="avatar"
							:src="formParams.avatar"
						/>
					</a-avatar>
				</ComUpload>
			</a-form-item>
			<a-form-item label="性别:" field="sex">
				<a-radio-group v-model="formParams.sex" class="flex m50">
					<a-radio v-for="item in SIX_TYPE" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="部门:">
				<a-tree-select v-model="formParams.deptId" placeholder="请选择部门" :data="deptList" allow-clear allow-search :tree-check-strictly="true" :fieldNames="{key:'id',title:'name'}" @change="handleChangeDept"></a-tree-select>
			</a-form-item>
			<a-form-item label="岗位:">
				<a-select v-model="formParams.postIds" placeholder="请选择岗位" allow-clear allow-search multiple allow-create :fallback-option="false" :disabled="!formParams.deptId">
					<a-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.id" />
				</a-select>
			</a-form-item>
			<!-- <a-form-item>
				<a-button type="primary" @click="handleSubmit">提交</a-button>
			</a-form-item> -->
		</a-form>
<!-- </ComModal> -->
</template>
<script lang="ts" setup>
import { SIX_TYPE } from "@/utils/filter";

import * as Api from '@/api/common';
import mixins from '@/mixins/index.js';
const props = defineProps({
	currentNode: { type: Object, default: () => { return {} } },

})
const { handleMixinSubmit } = mixins();
const emit = defineEmits(['refreshList']);
const formRef = ref(null);
const formParams = ref({
	firstName: '', // 姓氏
	lastName: '', // 名字
	email: '', // 邮箱
	mobile: '', // 手机号
	sex: 1, // 性别
	avatar: '', // 头像
	deptId: '', // 部门ID
	postIds: [], // 岗位ID
	postNames: [], // 岗位名称
	sex:1
});
const deptList=ref();//部门
const postList=ref();//岗位
const rules = reactive({
	username: [{ required: true, message: "名称不能为空", trigger: "blur" }],
	firstName: [{ required: true, message: "姓氏不能为空", trigger: "change" }],
	lastName: [{ required: true, message: "名字不能为空", trigger: "change" }],
	mobile: [{ required: true, message: "手机号不能为空", trigger: "change" }],
	sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
	// avatar: [{ required: true, message: "头像不能为空", trigger: "" }],
	email: [{ required: true,type:'email', trigger: "change" }],
});
watch(() => props.currentNode, value => {
	console.log('value===', {...value});
	if(value?.id){
		deptList.value = value.deptList || [];
		postList.value = value.children || [];
		formParams.value.deptId = value.id !==1 ? value.id : '';
	}
}, { deep: true, immediate: true })


// 切换部门
const handleChangeDept = (e) => {
	function print(arr){
			for(let i = 0,o; o = arr[i]; i++){
				if(o.id === e){
					formParams.value.postIds = '';
					postList.value = o?.children || [];
				}
				o.children && print(o.children);
			}
		}
	print(props.currentNode?.deptList);
}


// 提交
const handleSubmit = async () => {
	const valid = await formRef.value?.validate();
	if (valid) return;
	const { postIds, mobile } = formParams.value;
	const params = {
		...formParams.value,
		username: mobile,
		postIds: postIds.filter(item => typeof item === 'number'),
		postNames: postIds.filter(item => typeof item === 'string'),
	}
	console.log('提交===', {...params});
	await handleMixinSubmit(Api.ApiUserAdd, params, '', false);
    await formRef.value.resetFields();
	formParams.value.postIds = '';
	emit('refreshList');
};

defineExpose({
	handleSubmit
})
</script>
